<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Blog</title>
        <link  rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <div class="main-wrapper">
        <!--begin header-->
        <header>
            <nav>
                 <div class="logo"><a href="#">Jane</a></div>
                 <ul>
                     <li class="active"><a href="#">链接</a></li>
                     <li class="active"><a href="#">链接</a></li>
                     <li class="active"><a href="#">链接</a></li>
                     <li class="active"><a href="#">链接</a></li>
                 </ul>
            </nav>
            <div id="banner">
                <div class="inner">
                    <h1>Jane</h1>
                    <div class="hr"></div>
                    <p class="sub-heading">lerom meu  jisc  js cs sci kjhfa hasdjk ajdksj jfjdkh hdjsfhak fdhk</p>
                    <button>Know me</button>
                    <div class="more">more</div>
                </div>
            </div>
        </header>
        <!--end header-->
        <!--begin content-->
        <div class="content">
            <section class="green-section">
                <div class="wrapper">
                    <div>
                        <h2>一个标题</h2>
                        <div class="hr"></div>
                        <p>
                            Lofsdh  hjdskhfks jksfkncksd
                        </p>
                    </div>
                    <div class="icon-group">
                        <span class="icon">item1</span>
                        <span class="icon">item2</span>
                        <span class="icon">item3</span>
                    </div>
                </div>
            </section>
            <section class="gray-section">
              <div class="article-preview">
                <div class="img-section"><img src="pic01.jpg"></div>
                <div class="text-section">
                    <h2>又一个标题</h2>
                    <div class="sub-heading">我是副标题</div>
                    <p>jkdfhsk ksjfhj  jsdkjfdj jkdsj</p>
                </div>
              </div>
                <div class="article-preview">
                
                <div class="text-section">
                    <h2>又一个标题</h2>
                    <div class="sub-heading">我是副标题</div>
                    <p>jkdfhsk ksjfhj  jsdkjfdj jkdsj</p>
                </div>
                    <div class="img-section"><img src="pic02.jpg"></div>
              </div>
                <div class="article-preview">
                <div class="img-section"><img src="pic03.jpg"></div>
                <div class="text-section">
                    <h2>又一个标题</h2>
                    <div class="sub-heading">我是副标题</div>
                    <p>jkdfhsk ksjfhj  jsdkjfdj jkdsj</p>
                </div>
              </div>
            </section>
            <section class="purple-section">
              <div class="wrapper">
                <div class="heading-wrapper">
                    <h2>有一个标题</h2>
                    <div class="hr"></div>
                    <div class="sub-heading">kjsdl jkdslioe f jiosdfsjo sjaklj</div>
                </div>
                <div class="card-group">
                    <div class="card">
                    <h3>标题3</h3>
                    <p>hjdkfahlkdhfj jdksfhlkjdf kjh kjdash</p>
                    </div>
                    <div class="card">
                    <h3>标题3</h3>
                    <p>hjdkfahlkdhfj jdksfhlkjdf kjh kjdash</p>
                    </div>
                  </div>
                <div class="card-group">
                    <div class="card">
                    <h3>标题3</h3>
                    <p>hjdkfahlkdhfj jdksfhlkjdf kjh kjdash</p>
                    </div>
                    <div class="card">
                    <h3>标题3</h3>
                    <p>hjdkfahlkdhfj jdksfhlkjdf kjh kjdash</p>
                    </div>
                  </div>
                  <div class="card-group">
                    <div class="card">
                    <h3>标题3</h3>
                    <p>hjdkfahlkdhfj jdksfhlkjdf kjh kjdash</p>
                    </div>
                    <div class="card">
                    <h3>标题3</h3>
                    <p>hjdkfahlkdhfj jdksfhlkjdf kjh kjdash</p>
                    </div>
                  </div>

                </div>
            </section>
        </div>
        <!--end content-->
        <!--begin footer-->
        <footer>
                <ul class="share-group">
                    <li>item1</li>
                    <li>item2</li>
                    <li>item3</li>
                    <li>item4</li>               
                    <li>item5</li>
                </ul>
            <div class="copy">
                &copy Jane
            </div>
        </footer>
        <!--end footer-->
        </div>
    </body>
</html>